<template>
  <div class="common-size horizontal info_department">
    <page-head :pageHead="pageHeadData"></page-head>
    <div class="horizontal-page-content">
      <div class="horizontal-content half">
        <div class="half-content left">
          <content-head :contentHead="contentHeadData"></content-head>
          <div class="content-container">
            <div class="page-chart page-chart4">
              <div class="y-name">单位:台</div>
              <div class="chart-box" ref="chart1"></div>
            </div>
            <div class="horizontal-distribute-container text-center">
              <div v-html="item" v-for="(item, index) in textData1"></div>
            </div>
          </div>
        </div>
        <div class="half-content right">
          <content-head :contentHead="contentHeadDataTwo"></content-head>
          <div class="content-container">
            <div class="page-chart page-chart4">
              <div class="y-name">单位:万元</div>
              <div class="chart-box" ref="chart2"></div>
            </div>
            <div class="horizontal-distribute-container text-center">
              <div v-html="item" v-for="(item, index) in textData2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <page-footer :pageFooter="pageFooterData"></page-footer>
  </div>
</template>

<script>
  import pageHead from './pageHead.vue'
  import PageFooter from "./pageFooter.vue";
  import contentHead from "./contentHead.vue"
  import {nuxtMixins} from '../../assets/javascript/mixin'
  let echarts = require('echarts')
  export default{
    name: 'info_department',
    props:['chartData'],
    mixins: [nuxtMixins],
    data () {
      return {
        pageTitle: '<span>信息总览</span><span class="en_title"> Information Overview</span>',
        contentTitle: '科室分布',
        titleDescribe: '统计设备数量TOP5科室',
        contentHeadDataTwo: {
          contentTitle: '科室价值分布',
          titleDescribe: '统计设备估值TOP5科室'
        }
      }
    },
    methods: {
      ageLimitChart () {
        if (!this.chartData) {
          return false
        }
        if (!this.chartData.chartData) {
          return false
        }
        if (!this.chartData.chartData.chart1 && !this.chartData.chartData.chart2) {
          return false
        }
        if (!this.chartData.chartData.chart1.chart && !this.chartData.chartData.chart2.chart) {
          return false
        }
        const  chart1 = this.chartData.chartData.chart1
        const  chart2 = this.chartData.chartData.chart2
        const option = {
          backgroundColor: '#fff',
          xAxis: {
            type: 'category',
            boundaryGap : false,
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              interval: 0,
              textStyle: {
                color:'#231815'
              }
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['rgba(247,248,248,0.5)', 'rgba(0,0,0,0)'],
              }
            },
            data: []
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            top: 40,
            containLabel: true
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#231815'
              }
            },
            axisLine: {
              lineStyle: {
                width: 2,
                color: 'rgba(223,223,223, 0.5)'
              }
            }
          },
          series: [
            {
              name: '3的指数',
              type: 'line',
              symbolSize: 6,
              itemStyle: {
                normal: {
                  borderWidth: 3,
                  borderColor:'#3B70B7'
                }
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color:'#231815'
                  }
                }
              },
              lineStyle: {
                normal: {
                  color: '#3B70B7',
                  width: 3
                }
              },
              areaStyle: {
                normal: {
                  color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: 'rgba(59,112,183, 0.3)' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(59,112,183, 0)' // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                  }
                }
              },
              smooth: true,
              data: []
            }
          ]
        };
        const chart1Echart = echarts.init(this.$refs.chart1)
        const chart2Echart = echarts.init(this.$refs.chart2)
        if (chart1 && chart1.chart) {
          const option1 = JSON.parse(JSON.stringify(option))
          option1.xAxis.data = chart1.chart.x_data
          option1.series[0].data = chart1.chart.y_data
          chart1Echart.setOption(option1)
        }
        if (chart2 && chart2.chart) {
          const option2 = JSON.parse(JSON.stringify(option))
          option2.xAxis.data = chart2.chart.x_data
          option2.series[0].data = chart2.chart.y_data
          option2.series[0].itemStyle.normal.borderColor = '#55b437'
          option2.series[0].lineStyle.normal.color = '#55b437'
          option2.series[0].areaStyle.normal.color.colorStops[0].color = 'rgba(85,180,55, 0.3)'
          option2.series[0].areaStyle.normal.color.colorStops[1].color = 'rgba(85,180,55, 0)'
          chart2Echart.setOption(option2)
        }
      }
    },
    computed:{
      textData () {
        if(!this.chartData.textData) return
        return this.chartData.textData
      },
      textData1 () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart1) return []
        if(!this.chartData.chartData.chart1.textData) return []
        return this.chartData.chartData.chart1.textData
      },
      textData2 () {
        if(!this.chartData.chartData) return []
        if(!this.chartData.chartData.chart2) return []
        if(!this.chartData.chartData.chart2.textData) return []
        return this.chartData.chartData.chart2.textData
      }
    },
    mounted(){
      this.ageLimitChart()
    },
    components: {
      PageFooter,
      pageHead,
      contentHead
    }
  }
</script>
<style lang="scss">
  .common-size.horizontal {
    &.info_department {
      .content-container {
        padding: 0 10px;
        height: 452px;
        .horizontal-distribute-container {
          text-indent: 0em;
        }
        .page-chart {
          position: relative;
          .chart-box {
            width: 100%;
            height: 100%;
          }
          .y-name {
            position: absolute;
            top: 5px;
            right: 4%;
            font-size: 12px;
            color: #989898;
          }
        }
      }
    }
  }
</style>
